<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="投诉商家成功" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="complaintssuccess">
			<image :src="commonImg('complaintssuccess.png')" class="complaintssuccess-img"></image>
			<text class="complaintssuccess-txt">提交成功</text>
			<text class="complaintssuccess-desc">等待平台审核</text>
			<text class="complaintssuccess-desc">{{ getMessageText }}</text>
			<view @click="onClickGotoBack" class="complaintssuccess-btn"><button class="complaintssuccess-btn-wrap">返回</button></view>
		</view>
	</view>
</template>

<script>
import { myMixin } from '@/utils/mixin.js';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

export default {
	mixins: [myMixin],
	components: {
		uniNavBar
	},
	onLoad() {
		this.beginSetTime()
	},
	// 页面卸载的时候，一定要清除定时器
	onUnload() {
		if (this.timer) {
			clearTimeout(this.timer)
		}
	},
	data() {
		return {
			timer: null,
			countdown: 5,
			getMessageText: '5s后返回'
		};
	},
	methods: {
		beginSetTime() {
			if (this.countdown === 0) {
			  this.getMessageText = '5s后返回'
			  this.countdown = 60
			  this.timer = null
			  uni.navigateBack({})
			  return
			} else {
			  this.getMessageText = `${this.countdown}s后返回`
			  this.countdown--
			}
			this.timer = setTimeout(() => {
			  this.beginSetTime()
			}, 1000)
		},
		back() {
			uni.navigateBack({})
		},
		onClickGotoBack() {
			uni.navigateBack({});
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>
<style scoped>
.complaintssuccess {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding-top: 72rpx;
}
.complaintssuccess-img {
	width: 88rpx;
	height: 88rpx;
	border-radius: 50%;
}
.complaintssuccess-txt {
	margin-top: 30rpx;
	font-size: 40rpx;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.85);
	line-height: 56rpx;
}
.complaintssuccess-desc {
	margin-top: 18rpx;
	font-size: 36rpx;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	line-height: 50rpx;
}
.complaintssuccess-btn {
	width: 100%;
	margin-top: 60rpx;
	height: 90rpx;
	box-sizing: border-box;
	padding-left: 80rpx;
	padding-right: 80rpx;
}
.complaintssuccess-btn-wrap {
	width: 100%;
	height: 100%;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f02230;
}
</style>
